<template>
  <div div class="container">
    <!-- 要使用插槽,组件标签要写成双标签,在标签内添加要显示的内容 在组件中使用<slot>标签接收-->
    <Category title="美食">
      <img
        slot="center"
        src="https://img2.baidu.com/it/u=1467852103,3823965758&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1712163600&t=15637c2a91e5fe48d28ccb0d5f19f2bc"
        alt=""
      />
      <a slot="footer" href="#">更多美食</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(item, index) of games" :key="index">{{ item }}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="#">单机游戏</a>
        <a href="#">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <img
        slot="center"
        src="https://t14.baidu.com/it/u=3905809191,132495406&fm=58&app=83&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000"
        alt=""
      />
      <template v-slot:footer>
        <div class="foot">
          <a href="#">经典</a>
          <a href="#">热门</a>
          <a href="#">推荐</a>
        </div>
        <h4 slot="footer">欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: { Category },
  data() {
    return {
      foods: ["苹果", "香蕉", "西瓜", "葡萄"],
      games: ["LOL", "王者荣耀", "DNF", "绝地求生"],
      films: ["战狼", "战狼2", "拆弹专家", "速度与激情7"],
    };
  },
};
</script>
<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>
